<!DOCTYPE html>
<html>
<head>
	<title>人脸检测</title>
<link rel="stylesheet" href="__ROOT__/static/css/amazeui.min.css">
<script typet="text/javascript" src="__ROOT__/static/js/jquery-3.1.1.min.js"></script>
<script typet="text/javascript" src="__ROOT__/static/js/amazeui.min.js"></script>
</head>
<body>
<center>
<font size="+1">扫描下面的二维码向我付款，感谢您的支持</font><br>
<img id="pay_way" src="__ROOT__/payImages/alipay.jpg" style="width: 250px;height: 350px"><br>
<a href="#" id="change_pay" onclick="change_pay_way()">使用微信支付</a>
<h2>人脸识别</h2>
<font size="+2" color="#FF0000">{$username}</font><font size="+2">，欢迎使用人脸检测功能</font><br>developed by echo.<br>
<a href="javascript:return 0;" onclick="logout()">退出登录</a>&nbsp;<a href="{:url('fallback/index')}">反馈</a><br><br>
<button type="button" class="am-btn am-btn-primary js-modal-open">使用说明</button><br><br>
<a href="{:url('face/photoList')}">照片墙（管理员功能）</a><br><br>
<a href="{:url('fallback/getList')}">反馈列表（管理员功能）</a>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="your-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">使用说明
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
      <p align="left">1、使用人脸检测完全免费，收费的都是骗子。</p>
      <p align="left">2、检测结果由系统给出，不代表本人立场，本人对检测结果不负责。</p>
      <p align="left">3、选择一张相片，点击识别按钮即可检测。</p>
      <p align="left">4、此功能仅供娱乐。</p>
      <p align="left">5、如有疑问，请联系本人，邮箱：1012789729@qq.com</p>
      <p align="left">6、暂时只能识别一张人脸。</p>
    </div>
  </div>
</div>



<form action="{:url('face/test_result')}" method="post" enctype="multipart/form-data">
<!--请选择一张照片：<input type="file" name="photo" id="photo_url" onchange="previewFile()">--><br>
<div class="am-form-group am-form-file">
  <button type="button" class="am-btn am-btn-danger am-btn-sm">
    <i class="am-icon-cloud-upload"></i> 点击选择要识别的相片（2M以内）</button>
  <input id="doc-form-file" type="file" name="photo"  multiple id="photo_url" onchange="previewFile()">
</div>
<div id="file-list"></div>
<input type="submit" name="submit" id="sub_btn" class="am-btn am-btn-success" value="请选择一张照片" data-am-modal="{target: '#my-modal-loading'}" disabled="" />
</form>
<br>
<div id="show"><img src="__ROOT__/static/img/default.jpg" style="width: 400px;height: 500px"></div>

</center>
</body>
<script type="text/javascript">
	// function preview(){
	// 	var img_url = $('#photo_url').val();
	// 	alert(img_url);
	// 	show.innerHTML = "<img src='"+img_url+"' >"
	// }

function previewFile() {
 var preview = document.querySelectorAll('img')[1];
 var file  = document.querySelector('input[type=file]').files[0];
 var reader = new FileReader();

 reader.onloadend = function () {
 	if((reader.result).substring(0,10)=='data:image'){
 		preview.src = reader.result;
 		$('#sub_btn').attr('disabled',false);
 		$('#sub_btn').val("识别");
 	}else{
 		alert("您选择的不是图片哦！");
 		$('#sub_btn').attr('disabled',true);
 		$('#sub_btn').val("请选择一张照片");
 	}
  
 }
 if (file) {
  reader.readAsDataURL(file);
 } else {
  preview.src = "";
 }
}
$(function() {
$('#sub_btn').attr('disabled',true);
});

</script>
<script>
  $(function() {
    $('#doc-form-file').on('change', function() {
      var fileNames = '';
      $.each(this.files, function() {
        fileNames += '<span class="am-badge">' + this.name + '</span> ';
      });
      $('#file-list').html(fileNames);
    });
  });
</script>	
<script>
  $(function() {
    var $modal = $('#your-modal');

    $modal.siblings('.am-btn').on('click', function(e) {
      var $target = $(e.target);
      if (($target).hasClass('js-modal-open')) {
        $modal.modal();
      } else if (($target).hasClass('js-modal-close')) {
        $modal.modal('close');
      } else {
        $modal.modal('toggle');
      }
    });
  });

  function change_pay_way(){
    var url = $('#pay_way')[0].src;
    url = url.substring(url.length-10);
    // alert(url);

    if(url=="alipay.jpg"){
      $("#pay_way").attr('src','__ROOT__/payImages/wepay.png'); 
      $('#change_pay').html("使用支付宝支付");
    }else{
      $("#pay_way").attr('src','__ROOT__/payImages/alipay.jpg'); 
      $('#change_pay').html("使用微信支付");
    }
    
  }

  function logout(){
    var con = confirm("是否退出登录？");
    if(con){
      alert("退出成功，请重新登录！");
      location.href = "{:url('login/logout')}";
    }
  }
</script>
</html>